<template>
	<!--招聘列表页面-->
	<div id="recruitlist">
		<Top></Top>
		<div class="wrap">
			<div class="recruit-top clearfixed">
				<div class="re-top-item">
					<label for="">关键字</label>
					<el-input v-model="input" placeholder="请输入"></el-input>
				</div>
				<div class="re-top-item">
					<label for="">职位类型</label>
					<el-input v-model="input" placeholder="不限"></el-input>
				</div>
				<div class="re-top-item">
					<label for="">合同状态</label>
					<el-input v-model="input" placeholder="不限"></el-input>
				</div>

				<el-button type="primary" icon="el-icon-search">搜索</el-button>
			</div>
			
			<!--查看招聘状态-->
			<div class="look-recruit-state">
				<el-tabs type="border-card">
					<el-tab-pane label="正在招聘">
						<ul class="recruiting-list">
							<li v-for="item in 5" :key="item">
								<div class="recruiting-list-top">
									<div class="recruiting-top-left">
										<el-checkbox v-model="checked">
										<a href="javascript:;" @click="recruitDetails" class="work-name">java初级开发工程师</a>
										</el-checkbox>
										<label>[成都]</label>
										<div class="re-company-orther">
											<span class="salary">4k-7k</span>
											<span class="exer">2年</span>
											<span class="educ">本科</span>
											<span class="type">全职</span>
										</div>
									</div>
									<div class="recruiting-top-right">
										<span>停止招聘</span>
										<span>重新发布</span>
									</div>
								</div>
								<div class="recruiting-list-bottom">
									
								</div>
							</li>
						</ul>
					</el-tab-pane>
					<el-tab-pane label="过期招聘">过期招聘</el-tab-pane>
					<el-tab-pane label="所有职位">所有职位</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	import Top from './top'
	export default {
		components: {
			Top
		},
		data() {
			return {
				reform: {
					name: '',
					salary: '',
					city: '',
					exer: '',
					educ: '',
					type: '',
				},
				input: '',
				checked:false,
			}
		},
		mounted() {
			console.log(this.reform)
			this.reform = {
				name: 'Web前端工程师',
				salary: '4k-8k',
				city: '成都',
				exer: '1年以内',
				educ: '本科',
				type: '试用期',
			}
		},
		methods: {
			stopRecruid() {
			},
			resetRecruid(val) {
				this.$refs[val].resetFields();
			},
			recruitDetails(){
				let details = this.reform;
				this.$router.push({name:'firminfopublish',params:{data:details}});
			},
		}
	}
</script>
<style>
	.opt-box .el-form-item__content {
		margin: 0 !important;
	}

	/*.look-recruit-state .is-top{
		border-bottom: 1px solid #00CFFF;
	}*/
</style>
<style scoped>
	#recruitlist {
		background-color: #f1f1f1;
	}
	
	.show-recruid-title {
		text-align: center;
		padding-top: 30px;
	}
	
	.show-recruid-title a {
		color: #fff;
		background-color: #00CFFF;
		padding: 10px 20px;
		line-height: 35px;
		border-radius: 20px;
	}
	
	.show-recruid-title a:hover {
		background-color: #00BFFF;
	}
	
	.opt-box {
		text-align: center;
	}
	
	.opt-box .el-form-item__content {
		margin: 0 !important;
	}
	
	.recruitlist-box {
		width: 500px;
		border: 1px solid #ccc;
		margin: 30px auto 0;
		padding: 20px;
		box-sizing: border-box;
	}
	/*搜索欄*/
	
	.recruit-top {
		margin-top: 30px;
		background-color: #fff;
		padding: 35px 25px 25px;
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;
	}
	
	.recruit-top .re-top-item {
		float: left;
		margin-right: 50px;
	}
	
	.re-top-item label {
		margin-right: 5px;
	}
	
	.recruit-top .el-input {
		display: inline-block;
		width: 200px;
	}
	
	/*招聘状态*/
	.look-recruit-state{
		margin-top: 15px;
	}
	.look-recruit-state .el-tabs__nav-scroll{
		border-bottom: 1px solid #00CFFF;
	}
	/*正在招聘*/
	.recruiting-list{
		box-sizing: border-box;
		border: 1px solid #fff;
	}
	.recruiting-list li{
		overflow: hidden;
		border: 1px solid #ccc;
		padding: 10px;
		padding-left: 15px;
		margin-bottom: 10px;
		box-sizing: border-box;
	}
	.recruiting-list .recruiting-top-left{
		float: left;
		font-size: 12px;
		color: #333;
	}
	.recruiting-top-left .work-name{
		color: #00CFFF;
		font-weight: bold;
		font-size: 14px;
		margin-right: 5px;
	}
	.re-company-orther{
		margin-top: 10px;
		padding-left: 22px;
	}
	.re-company-orther span{
		margin-right: 15px;
		position: relative;
	}
	.re-company-orther span:after{
		content: "";
		display: block;
		position: absolute;
		height: 12px;
		border-right: 1px solid #333;
		right: -10px;
		top: 3px;
	}
	.re-company-orther span:last-child:after{
		border: none;
	}
	.recruiting-list .recruiting-top-right{
		float: right;
		margin-top: 8px;
	}
	.recruiting-top-right span{
		display: inline-block;
		padding: 5px 15px;
		cursor: pointer;
		border: 1px solid #00CFFF;
		color: #00CFFF;
		margin-left: 10px;
		border-radius: 20px;
		font-size: 14px;
	}
	.recruiting-top-right span:hover{
		color: #fff;
		background-color: #00CFFF;
	}
</style>